<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <img src="xxx.jpg" alt=""> -->
</body>
<script>
    // window.addEventListener('error')可以捕获到网络异常，类似图片加载失败 img src ⭕️
    function test() {
        console.log('-----begin');
        error;
        console.log('-----end');
    }
    window.addEventListener('error',(args) => {
        console.log('window.addEventListener捕获异步错误',args);
        return true;
    },true) // 捕获阶段捕获错误
    test();

    // window.addEventListener('error',function(e) {
    //     const target = e.target;
    //     if(!target) {
    //         return;
    //     }
    //     if(target.src || target.href) {
    //         const url = target.src || target.href;
    //         const reportData = {
    //             type:"error",
    //             subType:"resource",
    //             url,
    //             html:target.outerHTML,
    //             pageUrl:window.location.href,
    //             path:e.path
    //         }
    //         console.log('reportData',reportData);
    //     }
    // },true);


    // window.onerror 捕获图片加载错误 ⭕️
    // window.onerror = function (message, source, lineno, colno, error) {
    //         console.log('window.onerror捕获异步错误',message, source, lineno, colno, error);
    //         return true;
    //     }

    // try catch 捕获同步错误 ⭕️
    // try {
    //     console.log('-----begin');
    //     error;
    //     console.log('-----end');
    // } catch (error) {
    //     console.log('同步错误捕获',error);
    // }

    // try catch 在异步事件里同步捕获错误 ⭕️
    // setTimeout(() => {
    //     try {
    //         console.log('-----begin');
    //         error;
    //         console.log('-----end');
    //     } catch (error) {
    //         console.log('在异步事件里同步错误捕获',error);
    //     }
    // }, 0);

    // try catch 在异步事件里异步捕获错误 ❌
    // try {
    //     setTimeout(() => {
    //         console.log('-----begin');
    //         error;
    //         console.log('-----end');
    //     }, 0);
    // } catch (error) {
    //     console.log('在异步事件里异步捕获错误',error);
    // }

    // window.onerror 捕获异步错误 ⭕️
        // setTimeout(() => {
        //     console.log('-----begin');
        //     error;
        //     console.log('-----end');
        // }, 0);

    // Promise可以用catch捕获错误，但对于老代码来说全部加catch对监控不合适
    // new Promise((resolve, reject) => {
    //     console.log('-----begin');
    //     error;
    //     console.log('-----end');
    // }).catch((error) => {
    //     console.log('Promise捕获异步错误',error);
    // })


    // const asyncFunc = () => new Promise((resolve, reject) => {
    //     console.log('-----begin');
    //     error;
    //     console.log('-----end');
    // })
    // setTimeout(async() => {
    //     try {
    //         await asyncFunc();
    //     } catch (error) {
    //         console.log('try catch捕获异步错误',error);
    //     }
    // })

    // const asyncFunc = () => new Promise((resolve, reject) => {
    //     console.log('-----begin');
    //     error;
    //     console.log('-----end');
    // })
    // setTimeout(async() => {
    //     await asyncFunc();
    // })

    // window.addEventListener('unhandledrejection',  (event) => {
    //     console.log('unhandledrejection捕获async await错误',event);
    //     // throw event.reason;
    // });

    // window.addEventListener('error',(args) => {
    //     console.log('window.addEventListener捕获异步错误',args);
    //     return true;
    // },true) // 捕获阶段捕获错误

    // unhandledrejection捕获Promise错误 ⭕️
    // new Promise((resolve, reject) => {
    //     console.log('-----begin');
    //     error;
    //     console.log('-----end');
    // })
  
    
    // //下面两种都不行
    // window.addEventListener('error',(args) => {
    //     console.log('window.addEventListener捕获异步错误',args);
    //     return true;
    // },true) // 捕获阶段捕获错误
    // window.onerror = function (message, source, lineno, colno, error) {
    //         console.log('window.onerror捕获异步错误',message, source, lineno, colno, error);
    //         return true;
    //     }

    //     window.addEventListener('unhandledrejection',  (event) => {
    //     console.log('unhandledrejection捕获Promise错误',event);
    // });

</script>
</html>